<template>
  <div>
    <el-card class="box-card">
      <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
        <el-form-item>
          <el-input v-model="queryData.clientName" placeholder="用户姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryData.situation" placeholder="中奖情况">
              <el-option
                      v-for="item in situations"
                      :key="item.situation"
                      :label="item.situation"
                      :value="item.situation" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryData.jackpotStatus" placeholder="兑奖状态">
              <el-option
                      v-for="item in jackpotStatuss"
                      :key="item.jackpotStatus"
                      :label="item.jackpotStatus"
                      :value="item.jackpotStatus" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="query">查询</el-button>
          <el-button size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div style="height: 20px"></div>
      <div class="m-alert">
          <span class="el-icon-info"></span>
          <div>
              <div>非企业客户在客户线索中显示</div>
          </div>
      </div>
      <div style="height: 20px"></div>
    <el-card class="box-card">
<!--      <el-button type="primary" >批量派发</el-button>-->
      <el-button type="primary" @click="download">导出表格</el-button>
      <div class="interspaceH"></div>
        <el-table @selection-change="tableRowChange" :data="tableData"
                  :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
        <el-table-column
          prop="clientName"
          label="用户姓名"
          width="200">
        </el-table-column>
        <el-table-column
          prop="clientPhone"
          label="用户手机号"
          width="320">
        </el-table-column>
        <el-table-column
          prop="situation"
          label="中奖情况">
        </el-table-column>
        <el-table-column
          prop="prizesName"
          label="奖品信息">
        </el-table-column>
        <el-table-column
          prop="prizesType"
          label="奖品类型">
        </el-table-column>
        <el-table-column
          prop="jackpotStatus"
          label="兑奖状态">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
              <el-button size="mini" type="text" @click="views(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
        <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                       @current-change="queryDataHandle($event,pagePagination.pageSize)"
                       :current-page="pagePagination.currentPage"
                       :page-sizes="pagePagination.pageSizes"
                       :page-size="pagePagination.pageSize"
                       layout="total, sizes, prev, pager, next"
                       :total="pagePagination.total">
        </el-pagination>
    </el-card>
      <el-dialog title="详情" :visible.sync="view" width="30%" :close-on-click-modal="false">
          <el-form label-width="120px" :model="monomerData" ref="editForm">
              <el-form-item label="姓名" prop="clientName">
                  <el-input size="small" v-model="monomerData.clientName" style="width: 195px" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="clientPhone">
                  <el-input size="small" v-model="monomerData.clientPhone" style="width: 195px" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="中奖情况" prop="situation">
                  <el-input size="small" v-model="monomerData.situation" style="width: 195px" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="奖品信息" prop="prizesName">
                  <el-input size="small" v-model="monomerData.prizesName" style="width: 195px" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="奖品类型" prop="prizesType">
                  <el-input size="small" v-model="monomerData.prizesType" style="width: 195px" :disabled="true"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button size="small" @click="view = false">返回</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"
import axios from "axios";
export default {
  name: "third",
  components: {
    Pagination
  },
  data() {
    return {
      queryData:{},
        situations: [
            {
                situation: '未中奖',
                name: '未中奖',
            },
            {
                situation: '已中奖',
                name: '已中奖',
            },
        ],
        jackpotStatuss: [
            {
                jackpotStatus: '未兑奖',
                name: '未兑奖'
            },
            {
                jackpotStatus: '已兑奖',
                name: '已兑奖'
            }
        ],
        view: false,
        monomerData: {},
      tableData:[{
        name: '大翟',
        telphone: '15155551354',
        qingkuang: '已中奖',
        jiangpin: '月饼',
        type: '实物',
        status: '已兑奖'
      }],

      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 分页参数
        pageparm: {
            currentPage: 1,
            pageSize: 10,
            total: 10
        },
        pagePagination: {
            currentPage: 1,
            pageSizes: [10, 15, 20, 25],
            pageSize: 10,
            total: 0
        },

    }
  },
    mounted() {
        this.queryDataHandle(1, 10);
    },
  methods: {
      queryDataHandle(page = 1, row = 10) {
          let payload = {
              pageNum: page,
              pageSize: row
          }
          let that = this
          that.$request("/api/jackpot/selectJackpot/1_0", payload, "POST").then((data) => {
              that.pagePagination['total'] = data.total
              that.pagePagination['pageSize'] = data.row
              data.rows.map((item) => {
                  item['prizesType'] = item.prizesType == "1" ? "奖品实物" : "电子券"
              })
              that.tableData = data.rows
          })
      },
      query() {
          var jackpot = {
              clientName: this.queryData.clientName,
              situation: this.queryData.situation,
              jackpotStatus: this.queryData.jackpotStatus
          }
          let that = this
          that.$request("/api/jackpot/selectJackpot/1_0", jackpot, "POST").then((data) => {
              that.tableData = data.rows
          })
      },
      resetQuery() {
        this.queryData = {}
      },
      download() {

          var jackpot = {
              clientName : this.queryData.clientName,
              situation : this.queryData.situation,
              jackpotStatus : this.queryData.jackpotStatus
          }
          this.$requestFile("/api/jackpot/exportTable1/1_0", jackpot, "中奖名单.xlsx")
      },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },

    views(index,row) {
            this.view = true
            this.monomerData = row
    },
      tableRowChange(val) {
          if (val.length > 0) {
              this.titleCurrentPanel = true
          } else {
              this.titleCurrentPanel = false
          }
          this.multipleSelection = val;
      },
  }
}
</script>

<style scoped>
.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}
</style>
